<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>商品管理</title>
<script src="${ctx}/static/js/base.js" type="text/javascript"></script>
<script>
  var categoryList = [];
  $(document).ready(function() {
    Momo.syncAjax('查询', '${ctx}/member/shop/ajax-category-get-all', {},
        function(resp) {
          categoryList = resp.cids;
        });
    $('#search_l1ids').change(function() {
      var l1Id = $(this).val();
      var data = [];
      for (var i = 0; i < categoryList.length; i++) {
        if (l1Id == categoryList[i]['id']) {
          data = categoryList[i]['sub'];
          break;
        }
      }
      renderSelect($('#search_l2ids'), data);
      $('#search_EQ_categoryId').val(l1Id);
    });
    $('#search_l2ids').change(function() {
      var l2Id = $(this).val();
      var l1Id = $('#search_l1ids').val();
      var data = [];
outer:
      for (var i = 0; i < categoryList.length; i++) {
        if (l1Id == categoryList[i]['id']) {
          if (categoryList[i]['sub']) {
            for (var j = 0; j < categoryList[i]['sub'].length; j++) {
              if (l2Id == categoryList[i]['sub'][j]['id']) {
                data = categoryList[i]['sub'][j]['sub'];
                break;
              }
            }
          }
        }
      }
      renderSelect($('#search_l3ids'), data);
      $('#search_EQ_categoryId').val(l2Id);
    });
    $('#search_l3ids').change(function() {
      $('#search_EQ_categoryId').val($(this).val());
    });
    $('#create').click(function() {
      $(this).attr('href', '${ctx}/member/shop/product/create?cid=' + $('#search_EQ_categoryId').val());
    });
    renderSelect($('#search_l1ids'), categoryList);
  });
  function renderSelect(select, data) {
    select.empty();
    data = data || [];
    select.append($('<option>').val(0).text('--------请选择分类--------'));
    for (var i = 0; i < data.length; i++) {
      select.append($('<option>').val(data[i]['id']).text(data[i]['name']));
    }
  }
</script>
</head>

<body>
    <c:if test="${not empty message}">
        <div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
    </c:if>

    <div class="row">
        <div class="span11 offset1">
            <form class="form-search" action="#">
                <label>分类：</label>
                  <input id="search_EQ_categoryId" type="hidden" name="search_EQ_categoryId" value="${param.search_EQ_categoryId}">
                  <select id="search_l1ids"></select>
                  <select id="search_l2ids"></select>
                  <select id="search_l3ids"></select>
                <br><br>
                <label>标题：</label> <input type="text" name="search_LIKE_title" class="input-medium" value="${param.search_LIKE_title}"><br><br>
                <label>价格：</label> <input type="text" name="search_GTE_minPrice" class="input-medium" value="${param.search_GTE_minPrice}"> <label>-</label> <input type="text" name="search_LTE_maxPrice" class="input-medium" value="${search_LTE_maxPrice}"><br><br>
                <button type="submit" class="btn" id="search_btn">查找</button><br>
            </form>
        </div>
        <tags:sort/>
    </div>

    <table id="contentTable" class="table table-striped table-bordered table-condensed">
        <thead><tr><th width="40%">商品标题</th><th width="10%">价格</th><th width="20%">缩略图</th><th width="10%">状态</th><th width="20%">操作</th></tr></thead>
        <tbody>
        <c:forEach items="${products.content}" var="product">
          <tr>
            <td><a href="${ctx}/member/shop/product/update/${product.id}">${product.title}</a></td>
            <td>${product.price}</td>
            <td></td>
            <td>${product.statusString}</td>
            <td>
              <a href="${ctx}/member/shop/product/update/${product.id}">修改</a>
              <c:if test="${product.status == 0}">
              <a href="${ctx}/member/shop/product/delete/${product.id}">下架</a>
              </c:if>
              <c:if test="${product.status != 0}">
              <a href="${ctx}/member/shop/product/undelete/${product.id}">上架</a>
              </c:if>
            </td>
          </tr>
        </c:forEach>
        </tbody>
    </table>

    <tags:pagination page="${products}" paginationSize="50"/>

    <div><a id="create" class="btn" href="${ctx}/member/shop/product/create">创建商品</a></div>

</body>
</html>
